import { submitSeatAjax, getMySeatsAjax } from '../../utils/request'
import { getTimeDifference, formatTime } from '../../utils/util'
Page({
	/**
	 * 页面的初始数据
	 */
	data: {
		date: '日期',
		time: '时间',
		date1: '日期',
		time1: '时间',
		btn1: false,
		btn2: true,
		kxsrc: '../../images/kexuanzuowei.png',
		yxsrc: '../../images/yixuanzuowei.png',
		seat: '',
		username: '',
		phone: '',
		color1: '#3894FF',
		color2: '#ccc',
		color3: '#ccc',
		color4: '#ccc',
		type1: 'zhibokecheng',
		seats: '',
		vip1: '',
		vip2: '',
		vip3: '',
		vip4: '',
		vip5: '',
		vip6: '',
		vip7: '',
		vip8: '',
		vip9: '',
		vip10: '',
		a1: '',
		a2: '',
		a3: '',
		a4: '',
		a5: '',
		a6: '',
		a7: '',
		a8: '',
		b1: '',
		b2: '',
		b3: '',
		b4: '',
		b5: '',
		b6: '',
		b7: '',
		b8: '',
		b9: '',
		b10: '',
		b11: '',
		b12: '',
		c1: '',
		c2: '',
		c3: '',
		c4: '',
		c5: '',
		c6: '',
		c7: '',
		c8: '',
		c9: '',
		c10: '',
		c11: '',
		c12: '',
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	//加载页面函数
	onLoad: function (options) {
		this.setData({ phone: wx.getStorageSync('phone') })
	},
	/* 存储选座姓名 */
	nameInp(e) {
		this.setData({ username: e.detail })
	},
	/* 选择时间 */
	bindTimeChange(e) {
		this.setData({
			time: e.detail.value
		})
	},
	bindDateChange(e) {
		this.setData({
			date: e.detail.value
		})
	},
	bindTimeChange1(e) {
		this.setData({
			time1: e.detail.value
		})
	},
	bindDateChange1(e) {
		this.setData({
			date1: e.detail.value
		})
	},
	btn1() {
		this.setData({
			btn1: false,
			btn2: true,
			color1: '#3894FF',
			color2: '#ccc',
			color3: '#ccc',
			color4: '#ccc',
			type1: 'zhibokecheng',
		})
	},
	btn2() {
		this.setData({
			btn1: false,
			btn2: true,
			color1: '#ccc',
			color2: '#3894FF',
			color3: '#ccc',
			color4: '#ccc',
			type1: 'juemikecheng',
		})
	},
	btn3() {
		this.setData({
			btn2: false,
			btn1: true,
			color1: '#ccc',
			color2: '#ccc',
			color3: '#3894FF',
			color4: '#ccc',
			type1: 'dianbokecheng',
		})
	},
	btn4() {
		this.setData({
			btn2: false,
			btn1: true,
			color1: '#ccc',
			color2: '#ccc',
			color3: '#ccc',
			color4: '#3894FF',
			type1: 'yanxuekecheng',
		})
	},
	/* 选择座位 */
	selectSeat(e) {
		this.setData({
			seats: e.currentTarget.dataset.seats
		})
	},
	/* 提交选座的座位 */
	submitSeat() {
		let newSeat = this.data.seats
		let starttime = this.data.date + ' ' + this.data.time
		let endtime = this.data.date + ' ' + this.data.time1
		let t1 = (new Date(starttime)).valueOf()
		let t2 = new Date(endtime).valueOf()
		// 选座校验
		if (!this.data.seats) return wx.showToast({ title: '请选择座位', icon: 'error' })
		// 时间校验
		if (t2 - t1 <= 0) return wx.showToast({ title: '时间选择错误', icon: 'error' })
		if (!t1 || !t2) return wx.showToast({ title: '时间选择错误', icon: 'error' })
		// 姓名校验
		if (!this.data.username) return wx.showToast({ title: '请输入姓名', icon: 'error' })
		wx.showModal({
			content: '是否确定选座?',
			showCancel: true,
			cancelColor: '#EE0A24',
			confirmColor: '#1989FA',
			success: (res) => {
				if (res.confirm) {
					// 提交操作
					const obj = {
						type: this.data.type1,
						zw: this.data.seats,
						starttime: starttime.replace(/-/g, '.'),
						endtime: endtime.replace(/-/g, '.'),
						username: this.data.username,
						phone: this.data.phone,
						cz: getTimeDifference(starttime, endtime).secends + ''
					}
					submitSeatAjax(obj).then(res => {
						if (res) {
							wx.showToast({ icon: 'success', title: '预约成功' })
							// 清空预选的数据
							this.setData({
								type: '', zw: '', starttime: '', username: '',
								phone: '', cz: '', color1: '#3894FF',
								color2: '#ccc', color3: '#ccc', color4: '#ccc',
								btn1: false, btn2: true
							})
							// 更新本地已被预约的位子
							this.setData({ [newSeat.toLowerCase()]: true })
						} else {
							wx.showToast({ icon: 'error', title: '预约失败' })
						}
					})
				}
			}
		})
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
		this.setData({ date: formatTime(new Date()).replace(/\//g, '-').split(' ')[0] })
		// 获取被占用的座位
		getMySeatsAjax(this.data.phone).then(res => {
			let employedSeats = res.map(item => item.zw.toLowerCase())
			employedSeats.forEach(key => {
				this.setData({ [key]: true })
			})
		})
	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () {

	},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () {

	}
})